<template>
  <div class="content">
    <t-space class="content-space" direction="vertical" style="width: 100%">
      <t-row justify="start">
        <t-col :span="4" v-for="item in cardContent" :key="item.index" class="everyCard">
          <div class="card-box" @mouseenter.self="showMore(item.index)" @mouseleave.self="isShowMore = ''">
            <t-card :class="['card', item.index == isShowMore ? 'gray' : '']">
              <div class="title" v-show="item.index !== isShowMore">
                <img :src="item.picUrl" />
                <div class="words">
                  <div>
                    <b>{{ item.title }}</b>
                  </div>
                  <div>
                    <span>{{ item.enTitle }}</span>
                  </div>
                </div>
              </div>
              <div class="describe" v-show="item.index !== isShowMore">{{ item.content }}</div>

              <div class="newTitle" v-show="item.index == isShowMore">
                <p>{{ item.title }}</p>
                <p>{{ item.enTitle }}</p>
              </div>
              <div class="newDescribe" v-show="item.index == isShowMore">
                {{ item.content }}
              </div>
              <div class="footer-btn" v-show="item.index == isShowMore">
                <t-button theme="default" variant="outline">帮助文档</t-button>
                <t-button @click="toOtherPage(item.index)" :disabled="item.disabled">
                  {{ item.disabled ? '试用申请' : '开始使用' }}
                </t-button>
              </div>
            </t-card>
          </div>
        </t-col>
      </t-row>
    </t-space>
  </div>
</template>

<script>
import { setSessionStorage } from '@/utils/storage';
import imgUrl1 from '@/assets/dashboard/p1.png';
import imgUrl2 from '@/assets/dashboard/p2.png';
import imgUrl3 from '@/assets/dashboard/p3.png';
import imgUrl4 from '@/assets/dashboard/p4.png';
import imgUrl5 from '@/assets/dashboard/p5.png';
import imgUrl6 from '@/assets/dashboard/p6.png';
import imgUrl7 from '@/assets/dashboard/p7.png';

export default {
  components: {},
  data() {
    return {
      isShowMore: '', // 是否展示卡片更多内容
      cardContent: [
        {
          index: 1,
          title: '风险评估',
          enTitle: 'Risk Assessments',
          content: '适用于中国大陆企业针对个人信息保护、数据安全合规风险自评估的智能化在线工具。',
          picUrl: imgUrl1,
          meta: {
            toRiskPage: 'toRiskPage',
          },
        },
        {
          index: 2,
          title: '数据发现',
          enTitle: 'Data Discovery',
          content: '企业数据治理平台，提供数据资产扫描、分类分级、敏感数据发现、数据标注等功能。',
          picUrl: imgUrl2,
          disabled: true,
        },
        {
          index: 3,
          title: 'App 隐私合规',
          enTitle: 'App Privacy Compliance',
          content:
            '通过交互式检测和自动化检测技术，全面覆盖App隐私合规相关检查要点，精准识别风险，支持Android和iOS双平台。​',
          picUrl: imgUrl3,
          disabled: true,
        },
        {
          index: 4,
          title: '企业风险感知',
          enTitle: 'Enterprise Risk Perception',
          content: '通过持续监测企业对外数字资产的攻击面风险，以及时了解企业安全现状。',
          picUrl: imgUrl4,
          disabled: true,
        },
        {
          index: 5,
          title: '供应链风险管理',
          enTitle: 'Supply Chain Risk Management',
          content: '企业供应链管理中心，通过安全审计和技术评估持续监控、量化供应链安全风险。',
          picUrl: imgUrl5,
          disabled: true,
        },
        {
          index: 6,
          title: '合规培训',
          enTitle: 'Compliance Training',
          content:
            '利用线上平台优势，提供数据安全、个人信息保护相关内容培训，以加强企业数据合规建设理论基础以及培养员工数据安全意识。',
          picUrl: imgUrl6,
          disabled: true,
        },
        {
          index: 7,
          title: '合规智库',
          enTitle: 'Compliance Research',
          content: '提供全球数据合规实时动态资讯推送、在线法律法规/ 标准规范/执法动态/司法案例等数据库服务。​',
          picUrl: imgUrl7,
          disabled: true,
        },
      ],
    };
  },
  methods: {
    // card 获得焦点 显示更多
    showMore(index) {
      this.isShowMore = index;
    },
    toOtherPage(el) {
      if (el === 1) {
        this.$router.push('/risk-assessment');
        setSessionStorage('routeType', 'risk');
      }
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  .content-space {
    padding: 0 calc(20% + -120px);
    display: flex;
    justify-content: center;
  }
  display: flex;
  .everyCard {
    margin-top: 3%;
    display: flex;
    justify-content: center;
  }
  .card-box {
    .card {
      width: 20vw;
      height: 23vh;
      border-radius: 8px;
      min-width: 220px;
      min-height: 200px;
      font-weight: 300;
      font-size: 1vw;
      line-height: 22px;
      color: #606266;
      overflow: hidden;
      text-overflow: ellipsis;
      // padding: 1vw;
      // white-space: nowrap;

      .title {
        cursor: pointer;
        display: flex;
        padding: 10px;

        img {
          width: 4vw;
          height: 4vw;
        }

        .words {
          margin-left: 20px;
          margin-top: 10px;
          width: 100px;
          div {
            width: 13vw;
          }

          b {
            font-size: 1.2vw;
            font-weight: 900;
            line-height: 1.2vh;
            text-align: left;
          }

          span {
            font-size: 0.8vw;
            font-weight: 300;
            padding-right: 22px;
          }
        }
      }

      .describe {
        font-size: 0.8vw;
        margin-top: 1vw;
      }
      .newDescribe {
        font-size: 0.8vw;
        height: 72px;
        // background-color: aqua;
      }
      .newTitle {
        margin-bottom: 5%;
        :nth-child(1) {
          font-family: PingFang SC;
          font-size: 1vw;
          font-weight: 600;
          line-height: 22px;
        }
      }
      .footer-btn {
        margin: 8px 0 0 0;
        display: flex;
        justify-content: space-between;
        button {
          width: 43%;
        }
      }
    }
    .gray {
      background-color: #777777;
      color: #ffffff;
    }
  }
}
/deep/.t-button__text {
  font-size: 0.7vw;
}
</style>
